<template>
  <div>
    <BasicForm @register="registerForm" ref="formRef"/>
    <!-- 子表单区域 -->
    <a-tabs v-model:activeKey="activeKey" animated  @change="handleChangeTabs">
          <a-tab-pane tab="计划订单明细" key="psPlanOrderItem" :forceRender="true">
            <JVxeTable
              keep-source
              resizable
              ref="psPlanOrderItem"
              v-if="psPlanOrderItemTable.show"
              :loading="psPlanOrderItemTable.loading"
              :columns="psPlanOrderItemTable.columns"
              :dataSource="psPlanOrderItemTable.dataSource"
              :height="340"
              :rowNumber="true"
              :rowSelection="true"
              :disabled="formDisabled"
              :toolbar="true"
            />
          </a-tab-pane>
          <a-tab-pane tab="计划订单MRP计算结果" key="psPlanOrderResult" :forceRender="true">
            <JVxeTable
              keep-source
              resizable
              ref="psPlanOrderResult"
              v-if="psPlanOrderResultTable.show"
              :loading="psPlanOrderResultTable.loading"
              :columns="psPlanOrderResultTable.columns"
              :dataSource="psPlanOrderResultTable.dataSource"
              :height="340"
              :rowNumber="true"
              :rowSelection="true"
              :disabled="formDisabled"
              :toolbar="true"
            />
          </a-tab-pane>
          <a-tab-pane tab="计划订单组织" key="psPlanOrderOrganization" :forceRender="true">
            <JVxeTable
              keep-source
              resizable
              ref="psPlanOrderOrganization"
              v-if="psPlanOrderOrganizationTable.show"
              :loading="psPlanOrderOrganizationTable.loading"
              :columns="psPlanOrderOrganizationTable.columns"
              :dataSource="psPlanOrderOrganizationTable.dataSource"
              :height="340"
              :rowNumber="true"
              :rowSelection="true"
              :disabled="formDisabled"
              :toolbar="true"
            />
          </a-tab-pane>
          <a-tab-pane tab="计划订单日志" key="psPlanOrderLog" :forceRender="true">
            <JVxeTable
              keep-source
              resizable
              ref="psPlanOrderLog"
              v-if="psPlanOrderLogTable.show"
              :loading="psPlanOrderLogTable.loading"
              :columns="psPlanOrderLogTable.columns"
              :dataSource="psPlanOrderLogTable.dataSource"
              :height="340"
              :rowNumber="true"
              :rowSelection="true"
              :disabled="formDisabled"
              :toolbar="true"
            />
          </a-tab-pane>
          <a-tab-pane tab="计划订单抵扣明细" key="psPlanOrderDeduction" :forceRender="true">
            <JVxeTable
              keep-source
              resizable
              ref="psPlanOrderDeduction"
              v-if="psPlanOrderDeductionTable.show"
              :loading="psPlanOrderDeductionTable.loading"
              :columns="psPlanOrderDeductionTable.columns"
              :dataSource="psPlanOrderDeductionTable.dataSource"
              :height="340"
              :rowNumber="true"
              :rowSelection="true"
              :disabled="formDisabled"
              :toolbar="true"
            />
          </a-tab-pane>
    </a-tabs>

    <div style="width: 100%;text-align: center" v-if="!formDisabled">
      <a-button @click="handleSubmit" pre-icon="ant-design:check" type="primary">提 交</a-button>
    </div>
  </div>
</template>

<script lang="ts">

  import {BasicForm, useForm} from '/@/components/Form/index';
  import { computed, defineComponent, reactive, ref, unref } from 'vue';
  import {defHttp} from '/@/utils/http/axios';
  import { propTypes } from '/@/utils/propTypes';
  import { useJvxeMethod } from '/@/hooks/system/useJvxeMethods';
  import { VALIDATE_FAILED } from '/@/utils/common/vxeUtils';
  import {getBpmFormSchema,psPlanOrderItemColumns,psPlanOrderResultColumns} from '../PsPlanOrder.data';
  import {saveOrUpdate,psPlanOrderItemList,psPlanOrderResultList,psPlanOrderLogList} from '../PsPlanOrder.api';

  export default defineComponent({
    name: "PsPlanOrderForm",
    components:{
      BasicForm,
    },
    props:{
      formData: propTypes.object.def({}),
      formBpm: propTypes.bool.def(true),
    },
    setup(props){
      const [registerForm, { setFieldsValue, setProps }] = useForm({
        labelWidth: 150,
        schemas: getBpmFormSchema(props.formData),
        showActionButtonGroup: false,
        baseColProps: {span: 24}
      });

      const formDisabled = computed(()=>{
        if(props.formData.disabled === false){
          return false;
        }
        return true;
      });

      const refKeys = ref(['psPlanOrderVersion', 'psPlanOrderItem', 'psPlanOrderResult', 'psPlanOrderOrganization', 'psPlanOrderLog', 'psPlanOrderDeduction', ]);
      const activeKey = ref('psPlanOrderVersion');
      const psPlanOrderVersion = ref();
      const psPlanOrderItem = ref();
      const psPlanOrderResult = ref();
      const psPlanOrderOrganization = ref();
      const psPlanOrderLog = ref();
      const psPlanOrderDeduction = ref();
      const tableRefs = {psPlanOrderVersion, psPlanOrderItem, psPlanOrderResult, psPlanOrderOrganization, psPlanOrderLog, psPlanOrderDeduction, };
      const psPlanOrderItemTable = reactive({
        loading: false,
        dataSource: [],
        columns:psPlanOrderItemColumns,
        show: false
      })
      const psPlanOrderResultTable = reactive({
        loading: false,
        dataSource: [],
        columns:psPlanOrderResultColumns,
        show: false
      })
      const psPlanOrderOrganizationTable = reactive({
        loading: false,
        dataSource: [],
        columns:psPlanOrderOrganizationColumns,
        show: false
      })
      const psPlanOrderLogTable = reactive({
        loading: false,
        dataSource: [],
        columns:psPlanOrderLogColumns,
        show: false
      })

      const [handleChangeTabs,handleSubmit,requestSubTableData,formRef] = useJvxeMethod(requestAddOrEdit,classifyIntoFormData,tableRefs,activeKey,refKeys,validateSubForm);

      function classifyIntoFormData(allValues) {
        let main = Object.assign({}, allValues.formValue)
        return {
          ...main, // 展开
      psPlanOrderItemList: allValues.tablesValue[0].tableData,
      psPlanOrderResultList: allValues.tablesValue[1].tableData,
      psPlanOrderLogList: allValues.tablesValue[2].tableData
        }
      }

      //表单提交事件
      async function requestAddOrEdit(values) {
        await saveOrUpdate(values, true);
      }

      const queryByIdUrl = '/psPlanOrder/psPlanOrder/queryById';
      async function initFormData(){
        let params = {id: props.formData.dataId};
        const data = await defHttp.get({url: queryByIdUrl, params});
        //设置表单的值
        await setFieldsValue({...data});
        requestSubTableData(psPlanOrderItemList, {id: data.id}, psPlanOrderItemTable, ()=>{
          psPlanOrderItemTable.show = true;
        });
        requestSubTableData(psPlanOrderResultList, {id: data.id}, psPlanOrderResultTable, ()=>{
          psPlanOrderResultTable.show = true;
        });
        requestSubTableData(psPlanOrderLogList, {id: data.id}, psPlanOrderLogTable, ()=>{
          psPlanOrderLogTable.show = true;
        });
        //默认是禁用
        await setProps({disabled: formDisabled.value})
      }

      initFormData();

      return {
        registerForm,
        formDisabled,
        formRef,
        handleSubmit,
        activeKey,
        handleChangeTabs,
        psPlanOrderVersion,
        psPlanOrderItem,
        psPlanOrderResult,
        psPlanOrderOrganization,
        psPlanOrderLog,
        psPlanOrderDeduction,
        psPlanOrderItemTable,
        psPlanOrderResultTable,
        psPlanOrderOrganizationTable,
        psPlanOrderLogTable,
        psPlanOrderDeductionTable,
      }
    }
  });
</script>